<template>
  <div class="el-badge">
    <slot></slot>
    <transition name="el-zoom-in-center">
      <sup
        v-show="!hidden && ( content || isDot )"
        v-text="content"
        class="el-badge__content"
        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
      </sup>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'MyBadge',

    props: {
      value: '',
      max: Number,
      isDot: Boolean,
      hidden: Boolean
    },

    computed: {
      content() {
        if (this.isDot) return;

        const value = this.value;
        const max = this.max;

//        if (typeof value === 'number' && typeof max === 'number') {
//          return max < value ? `${max}+` : value;
//        }
        if(value!==0){
          return '+'+value;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .el-badge{
    .el-badge__content{
      background-color: white;
      display: inline-block;
      color: #2196F3;
      font-weight: 600;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      padding: 0;
      text-align: center;
      white-space: nowrap;
      border: none;
    }
    .el-badge__content.is-fixed{
      position: absolute;
      top: 0;
      transform: translateY(-50%) translateX(100%);
      right: 0!important;
    }
  }
</style>
